import { position } from './auto-clear-pos'
export default function LotteryCanvas (settings, callback) {
  this.cover = null
  this.ctx = null
  this.scratchDiv = null
  this.cardDiv = null
  this.cHeight = 0
  this.cWidth = 0
  this.supportTouch = false
  this.events = []
  this.startEventHandler = null
  this.moveEventHandler = null
  this.endEventHandler = null
  this.currIndex = 0
  this.timer = null

  this.opt = {
    coverColor: '#C5C5C5',
    coverImg: '',
    ratio: 0.8,
    callback: null
  }

  this.init(settings, callback)
};

function _calcArea (ctx, callback, ratio) {
  var pixels = ctx.getImageData(0, 0, this.cWidth, this.cHeight)
  var transPixels = []
  _forEach(pixels.data, function (item, i) {
    var pixel = pixels.data[i + 3]
    if (pixel === 0) {
      transPixels.push(pixel)
    }
  })

  if (transPixels.length / pixels.data.length > ratio) {
    callback && typeof callback === 'function' && callback(ctx)
  }
}

function _forEach (items, callback) {
  return Array.prototype.forEach.call(items, function (item, idx) {
    callback(item, idx)
  })
}

function _isCanvasSupported () {
  var elem = document.createElement('canvas')
  return !!(elem.getContext && elem.getContext('2d'))
}

function _startEventHandler (event) {
  event.preventDefault()
  this.moveEventHandler = _moveEventHandler.bind(this)
  this.cover.addEventListener(this.events[1], this.moveEventHandler, false)
  this.endEventHandler = _endEventHandler.bind(this)
  document.addEventListener(this.events[2], this.endEventHandler, false)
};
function _moveEventHandler (event) {
  event.preventDefault()
  var evt = this.supportTouch ? event.touches[0] : event
  var coverPos = this.cover.getBoundingClientRect()
  var pageScrollTop = document.documentElement.scrollTop || document.body.scrollTop
  var pageScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
  var mouseX = evt.pageX - coverPos.left - pageScrollLeft
  var mouseY = evt.pageY - coverPos.top - pageScrollTop
  this.ctx.beginPath()
  this.ctx.fillStyle = '#FFFFFF'
  this.ctx.globalCompositeOperation = 'destination-out'
  this.ctx.arc(mouseX, mouseY, 10, 0, 2 * Math.PI)
  this.ctx.fill()
};

function _endEventHandler (event) {
  event.preventDefault()
  if (this.opt.callback && typeof this.opt.callback === 'function') _calcArea.call(this, this.ctx, this.opt.callback, this.opt.ratio)
  this.cover.removeEventListener(this.events[1], this.moveEventHandler, false)
  document.removeEventListener(this.events[2], this.endEventHandler, false)
};

LotteryCanvas.prototype.autoDraw = function () {
  const [mouseX, mouseY] = position[this.currIndex]
  this.ctx.beginPath()
  this.ctx.fillStyle = '#FFFFFF'
  this.ctx.globalCompositeOperation = 'destination-out'
  this.ctx.arc(mouseX, mouseY, 10, 0, 2 * Math.PI)
  this.ctx.fill()
  this.currIndex += 4
  if (this.currIndex < position.length - 1) {
    requestAnimationFrame(this.autoDraw.bind(this))
  } else {
    if (this.opt.callback && typeof this.opt.callback === 'function') {
      _calcArea.call(this, this.ctx, this.opt.callback, this.opt.ratio)
    }
  }
}

LotteryCanvas.prototype.createCanvas = function () {
  this.cover = document.createElement('canvas')
  this.cover.id = 'cover'
  this.cover.height = this.cHeight
  this.cover.width = this.cWidth
  this.ctx = this.cover.getContext('2d')
  if (this.opt.coverImg) {
    var _this = this
    var coverImg = new Image()
    // coverImg.crossOrigin = ''
    coverImg.src = this.opt.coverImg
    coverImg.onload = function () {
      _this.ctx.drawImage(coverImg, 0, 0, _this.cover.width, _this.cover.height)
      _this.ctx.globalCompositeOperation = 'destination-out'
    }
  } else {
    this.ctx.fillStyle = this.opt.coverColor
    this.ctx.fillRect(0, 0, this.cover.width, this.cover.height)
  }
  this.scratchDiv.appendChild(this.cover)
  this.cardDiv.style.opacity = 1
}

LotteryCanvas.prototype.eventDetect = function () {
  if ('ontouchstart' in window) this.supportTouch = true
  this.events = this.supportTouch ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']
  this.addEvent()
}

LotteryCanvas.prototype.addEvent = function () {
  this.startEventHandler = _startEventHandler.bind(this)
  this.cover.addEventListener(this.events[0], this.startEventHandler, false)
}

LotteryCanvas.prototype.clearCover = function () {
  this.ctx.save()
  this.ctx.clearRect(0, 0, this.cover.width, this.cover.height)
  this.cover.removeEventListener(this.events[0], this.startEventHandler)
  this.cover.removeEventListener(this.events[1], this.moveEventHandler)
  this.cover.removeEventListener(this.events[2], this.endEventHandler)
}

LotteryCanvas.prototype.init = function (settings, callback) {
  if (!_isCanvasSupported()) {
    console.log('对不起，当前浏览器不支持Canvas，无法使用本控件！')
    return
  }
  var _this = this
  _forEach(arguments, function (item) {
    if (typeof item === 'object') {
      for (var k in item) {
        if (k === 'callback' && typeof item[k] === 'function') {
          _this.opt.callback = item[k].bind(_this)
        } else {
          k in _this.opt && (_this.opt[k] = item[k])
        }
      }
    } else if (typeof item === 'function') {
      _this.opt.callback = item.bind(_this)
    }
  })
  this.scratchDiv = document.querySelector('.prize-panel')
  this.cardDiv = document.querySelector('.prize-panel-mask')
  if (!this.scratchDiv || !this.cardDiv) return
  this.cHeight = this.cardDiv.clientHeight
  this.cWidth = this.cardDiv.clientWidth
  this.cardDiv.style.opacity = 0
  this.createCanvas()
  // this.eventDetect()
}

LotteryCanvas.case = function (settings, callback) {
  return new LotteryCanvas(settings, callback)
}
